<template>
  <div class="box">
    <div class="title">
      <p>年度游客量统计</p>
      <img src="../../images/dataScreen-title.png" alt="" />
    </div>
    <div class="charts" ref="charts"></div>
  </div>
</template>

<script setup lang="ts" name="Year">
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'
let charts = ref()
onMounted(() => {
  let myChart = echarts.init(charts.value)
  myChart.setOption({
    xAxis: {
      // x轴均匀分布
      type: 'category',
      // 坐标轴刻度标签的相关设置。
      axisLabel: {
        color: '#fff',
        fontSize: 13,
      },
      data: [
        '一',
        '二',
        '三',
        '四',
        '五',
        '六',
        '七',
        '八',
        '九',
        '十',
        '十一',
        '十二',
      ],
    },
    yAxis: {
      // 坐标轴名称
      name: '人数(万人)',
      // 坐标轴名称样式
      nameTextStyle: {
        color: '#fff',
        fontSize: 16,
      },
      // 轴线
      axisLine: {
        show: true,
      },
      // 分割线
      splitLine: {
        show: false,
      },
      // 刻度
      axisTick: {
        show: true,
      },
      // 坐标轴刻度标签的相关设置。
      axisLabel: {
        color: '#fff',
        fontSize: 14,
      },
    },
    series: [
      // 散点图
      {
        type: 'scatter',
        data: [33, 88, 21, 19, 44, 55, 12, 39, 133, 34, 75, 88],
        // 标记图形设置
        symbol: 'triangle',
        // 标记图形的大小
        symbolSize: 12,
        // 图文标签
        label: {
          show: true,
          position: 'top',
          fontSize: 16,
          color: '#fff',
        },
        // 散点图标记的颜色
        itemStyle: {
          color: 'cyan',
        },
      },
    ],
    grid: {
      left: 35,
      right: 5,
      bottom: 25,
      top: 38,
    },
  })
})
</script>

<style scoped lang="scss">
.box {
  width: 100%;
  height: 100%;
  margin: 15px 0;
  background: url(../../images/dataScreen-main-lt.png) no-repeat;
  background-size: 100% 100%;
  .title {
    margin-left: 15px;
    p {
      font-size: 20px;
      color: #fff;
    }
  }
  .charts {
    width: 100%;
    height: 100%;
  }
}
</style>
